/*------------------------------------------------------------------
[Master Stylesheet]

Project:		Shared Rides
Last change:	27/08/2014
Assigned to:	Santiago Alurralde (sa)
-------------------------------------------------------------------*/

@font-face {
  font-family: 'LibelSuit';
  src: 			url('../fonts/libelsuit.ttf');
}

@font-face {
  font-family: 'Raleway';
  src: 			url('../fonts/raleway.ttf');
}

@font-face {
  font-family: 'Raleway-Thin';
  src: 			url('../fonts/raleway-thin.ttf');
}


/*------------------------------------------------------------------
[General]
-------------------------------------------------------------------*/

* {
	margin:				0;
	padding:			0;	
}

html {
	height:				100%;
}

a {
	text-decoration:	none;
	color:				black;
}

body {
	font-family: 		'Raleway-Thin', sans-serif;
	font-weight:		normal;
	height:				100%;	
	text-shadow: 		0 1px 1px rgba(0,0,0,.2);
}


/*------------------------------------------------------------------
[Content]
------------------------------------------------------------------*/

.sr-content {
	/*	Container with background, between header and footer */
	
	background-image:	url(../images/txture1.png); 
	clear:				both;
	height:				auto;
	margin:				40px auto 0;    /* OJO */
	min-height:			75%;
	padding:			50px 0 2em;
	width:				100%;
}

.sr-board {	
	/*	Container with white background */
	
	background-color:	#FFF;
	padding:			20px 0;
	width:				100%;	
}

.sr-tupper {
	/*	Invisible wrapper */

    margin:				0 auto;
	position:			relative;
	width:				900px;
}

.sr-mini {
	/*	Invisible wrapper */
	
	width:				750px;
}

.border {
    /*	Dark border and shadow */

    box-shadow:			1px 1px 1px #000;
    border:				solid 1px;
}

.border-light {
    /*	Light border and shadowless */

    box-shadow:			0 1px 1px rgba(0, 0, 0, .15);
    border:				solid #CFCFCF 1px;
}


/*------------------------------------------------------------------
[Helpers]
------------------------------------------------------------------*/

.block-half {
	width:				50%;
}

.block-left {
	float:				left;
}

.block-right {
	float:				right;
}

.hrs {
    /*	Horizontal and dark lines */

    background:			black;
    border: 			0;
    height: 			1px;
    margin-top:			25px;
    margin-bottom:		30px;
    text-align: 		center;
}

.vrs {
    /*	Vertical and light lines */

    border-left: 		thin solid #CFCFCF;
}

.clearer {
    /*	Class made for divs that clear floating divs */

    clear:				both;
}


/*------------------------------------------------------------------
[Footer / .sr-footer]
-------------------------------------------------------------------*/

.sr-footer {
	background-image:	url(../images/txture.png);
	clear:				both;
	color:				#FFF;
	font-size:			80%;
	font-family: 		'Raleway', sans-serif;	
	height:				4em;	
	margin-top: 		-0.5em;
	padding:			3em 0em; 
	position: 			relative;
	bottom:				0;
	text-align:			center;
	width:				100%;
 	z-index: 			10;
}


/*------------------------------------------------------------------
[Navigation / .sr-nav]
------------------------------------------------------------------*/

.text-logo {
	font-family:		'LibelSuit', 'Georgia', serif;
	font-size:			1.95vw;
	vertical-align:		middle;
	position: 			fixed;	
	top: 				0.75%;	
	left: 				4%;
}

.text-logged {
	position: 			fixed;
	font-size: 			80%;
	top: 				2.25%;
	right: 				6.5%;
	vertical-align:		middle;	
}

.sr-nav {
	background-color:	#69A625;
	box-shadow:			1px 1px 6px #000;
	overflow:			auto;	
	position:			fixed;
	text-align: 		center;		
	top:				0;
	width:				100%;
	z-index:			2000;
}
	.sr-nav li {
		display:			inline;
		list-style-type:    none;		
	}

	.sr-nav li .highlight {	
		font-size:			.97vw;
		font-weight:		bold;	/* Modify for eye-candy */
		letter-spacing:		1px;
        text-transform:		uppercase;
	}

	.sr-nav li a {
		color:				black;
		display:			inline-block;
 		line-height:        300%;	
 		padding:            .2% 3.5%;
 		
		/* Color Transition */
		-webkit-transition:	.4s;
           -moz-transition:	.4s;
                transition:	.4s;

	}

	.sr-nav li a.highlight:hover {
        background:			-webkit-linear-gradient(top, #90AA44, #9ED474);
		background:			   -moz-linear-gradient(top, #90AA44, #9ED474);
		box-shadow:			0 2px 2px #000;
	}

	.sr-nav .current {
        background:			-webkit-linear-gradient(top, #90AA44, #A5E580);
        background:			   -moz-linear-gradient(top, #90AA44, #A5E580);
		box-shadow:			0 1px 1px #000;
	}



/*------------------------------------------------------------------
[Buttons]
------------------------------------------------------------------*/

/*------------------------------------------------------------------
[Buttons / General Button / .btn]
------------------------------------------------------------------*/

.btn {
    border-radius:	2px;
    background: 	-webkit-linear-gradient(top, #90AA44, #9ED474);
    background: 	   -moz-linear-gradient(top, #90AA44, #9ED474);
    box-shadow: 	0 1px 2px rgba(0,0,0,.2);
    border: 		solid 1px #90AA44;
    color:			white;
    font-size:		100%;
    font-weight:	bold;
    font-family: 	'Raleway-Thin', sans-serif;
    height:			30px;
    margin:			10px 0 10px;
    text-shadow: 	0 1px 1px rgba(0,0,0,.3);
    width:			130px;
}

.btn:hover {
    background: 	-webkit-linear-gradient(top, #99BB66, #9ED474);
    background: 	   -moz-linear-gradient(top, #99BB66, #9ED474);
}

/*------------------------------------------------------------------
[Buttons / Specific Buttons]
------------------------------------------------------------------*/

.btn-logout {
    position: 		fixed;
    right: 			.5%;
}

.btn-alert {
    position: 		fixed;
    right: 			3.5%;
}

.btn-alert, .btn-logout {
    top:			1.5%;
    width:			1.7%;
}

.help-icon {
    width:			20px;
    margin:			1px 10px 0 0;
}


/*------------------------------------------------------------------
[Notifications / .notifications]
------------------------------------------------------------------*/

#notifications-box {
    /* Little window for notifications */

	box-shadow:         1px 0 10px 0 rgba(180, 180, 180, .65);
	display:			none;
	opacity:			.95;
	padding:			1.1em;
	position: 			fixed;
	right: 				20px;
	top: 				60px;	
	z-index: 			5000;	
}

.notifications {
    /* Class for notifications-box: helps with styling */

	top: 				200px;
	z-index:			5000;
	background-color:	#E5E5E5;	
	position: 			relative;
	width: 				250px;
	padding: 			0;
	overflow:			visible;	
	border: 			#CACACA solid 1px;	 	
}

.notifications:after {
	z-index:			5000;
	content: 			'';
	position: 			absolute;
	border-style: 		solid;
	border-width: 		0 9px 9px;
	border-color: 		#E5E5E5 transparent;
	display: 			block;
	width: 				0;
	z-index: 			1;
	top: 				-9px;
	left: 				230px;
}

.notifications:before {
	content: 			'';
	position: 			absolute;
	border-style: 		solid;
	border-width: 		0 9px 9px;
	border-color: 		#A0A0A0 transparent;
	display: 			block;
	width: 				0;
	z-index: 			0;
	top: 				-10px;
	left: 				230px;
}

.notifications-list {
    /* List that contains notification items */

	list-style-type: 	none;
}

.notification-item {
    /* Every list item: represents a notification */

	background-color:	#FAFAFA;
	margin:				1%;
	padding:			2%;
	box-shadow:			0 1px 2px rgba(0, 0, 0, .2);
	font-size:			80%;
}

.notification-item a{
	color:				black;
}

.notification-item:hover {
	cursor:				pointer;
}


.notification-bubble {
    background-color:	red;
    border-radius:		30px;
    box-shadow:			1px 1px 1px #555;    
    color:				white;
    display: 			none;
    font-weight:		bold;
    font-size:			.6em;
	padding: 			1px 4px 2px 3px;    
    position:			absolute;
	top: 				3px;
	right: 				44px;
}

h5 {
	text-align:	 		center;
	margin-bottom:		10px;
}


/*------------------------------------------------------------------
[Maps]
------------------------------------------------------------------*/

.map-driver {
	/*	Shown in Main Menu */
	
	width: 		838px;
	margin:		0 0 0 30px;
	border:		1px solid #CCC;
}

.map-pedestrian {
	/*	Shown in Main Menu */
	
	margin:		0 0 0 30px;
}

.map-simple {
	/*	Class for map-pedestrian */

    border:		1px solid #CCC;
    height: 	450px;
    width: 		838px;
}

.map-static {
	/*	Shown in profiles */

    border:		1px solid #CCC;
	height: 	400px;
    width: 		400px;
}


/*------------------------------------------------------------------
[Tables]
------------------------------------------------------------------*/

/*------------------------------------------------------------------
[Tables / Schedule / .sr-schedule]
------------------------------------------------------------------*/

.sr-schedule {
    /*	Table for displaying weekly schedules */

	font-family: 		'Raleway', sans-serif;
	font-size:			75%;

    background:			-webkit-linear-gradient(top, #FDFDFD, #FBFBFB);
    background:			   -moz-linear-gradient(top, #FDFDFD, #FBFBFB);

	border:				1px solid #CCC;
	border-spacing: 	0;

    -webkit-box-shadow:	0 1px 2px #D1D1D1;
       -moz-box-shadow:	0 1px 2px #D1D1D1;
            box-shadow: 0 1px 2px #D1D1D1;

    clear:				both;
	margin:				0 auto;
	margin-top:			5%;
}

.sr-schedule th {
	background:			-webkit-linear-gradient(top, #90AA44, #50A410);
	background:			   -moz-linear-gradient(top, #90AA44, #50A410);

    border-bottom:		1px solid #E0E0E0;
	padding:			10px 15px 15px;
}

.sr-schedule tr {
	text-align: 		center;
}

.sr-schedule td:first-child {
	padding-left:		20px;
	border-left: 		0;
}

.sr-schedule td {
	padding:			10px;
	border-top: 		1px solid #FFF;
	border-bottom:		1px solid #E0E0E0;
	border-left: 		1px solid #E0E0E0;
}

.sr-schedule tr {	
	background:			-webkit-linear-gradient(top, #FAFAFA, #F7F7F7);
	background:			   -moz-linear-gradient(top, #FAFAFA, #F7F7F7)
}

.sr-schedule tr:last-child td {
	border-bottom:		0;
}

/*------------------------------------------------------------------
[Tables / Users / .sr-table-users]
------------------------------------------------------------------*/

.sr-table-users {
    /*	Table for displaying users' list */

    background:			-webkit-linear-gradient(top, #FDFDFD, #FBFBFB);
    background:			   -moz-linear-gradient(top, #FDFDFD, #FBFBFB);

	border:				#CCC 1px solid;
	border-spacing: 	0;
	
	-webkit-box-shadow: 0 1px 2px #D1D1D1;
	   -moz-box-shadow:	0 1px 2px #D1D1D1;	
	        box-shadow: 0 1px 2px #D1D1D1;

    font-family: 		'Raleway-Thin', sans-serif;
}

.sr-table-users tr {
	text-align: 		center;
}

.sr-table-users th {
	font-size:			95%;
}

.sr-table-users td:first-child {
	border-left: 		0;
    padding-left:		20px;
}

.sr-table-users td {
	border-top: 		1px solid #FFF;
	border-bottom:		1px solid #E0E0E0;
	border-left: 		1px solid #E0E0E0;
    padding:			10px;
}

.sr-table-users tr:nth-child(even) {	
	background:			-webkit-linear-gradient(top, #FAFAFA, #F7F7F7);
	background:			   -moz-linear-gradient(top, #FAFAFA, #F7F7F7)
}

.sr-table-users tr:last-child td {
	border-bottom:		0;
}

.sr-table-users tr:hover td {
	background:			-webkit-linear-gradient(top, #F4F4F4, #F1F1F1);
	background:			   -moz-linear-gradient(top, #F4F4F4, #F1F1F1);	
}


/*------------------------------------------------------------------
[Tooltip]
-------------------------------------------------------------------*/

.ui-tooltip {
    /*	Jquery UI tooltip styling */

    border-radius:		0;
    box-shadow: 		0 0 5px #555;
    color: 				black;
    font-size:			80%;
    padding: 			10px 20px;
}

.ui-tooltip, .arrow:after {
	background-color: 	#FAFAFA;
 	border: 			2px solid #FAFAFA;	
}

.arrow {
    /*	Corresponds to the UI tooltip */

	width: 				70px;
	height: 			16px;
	overflow: 			hidden;
	position: 			absolute;
	left: 				50%;
	margin-left: 		-35px;
	bottom: 			-16px;
}

.arrow.top {
	top: 				-20px;
	bottom: 			auto;
}

.arrow.left {
	left: 				20%;
}

.arrow:after {
	content: 			"";
	position: 			absolute;
	left: 				20px;
	top: 				-20px;
	width: 				25px;
	height: 			23px;
 	box-shadow: 		6px 6px 6px -7px #444;	
	-webkit-transform: 	rotate(45deg);
 	   -moz-transform:	rotate(45deg);		
	        transform: 	rotate(45deg);
}

.arrow.top:after {
	bottom: 			-20px;
	top: 				auto;
}


/*------------------------------------------------------------------
[Comments]
-------------------------------------------------------------------*/





